<template>
  <div class="list">
    <!-- todoObj:App中的todoList数组中的某个对象 -->
    <!-- todo:传给Item组件的参数 -->
    <!-- key:根据对象中的id属性来遍历 -->
    <Item v-for="todoObj in todoList" :key="todoObj.id" :todo="todoObj" />
  </div>
</template>

<script>
// 引入子组件Item
import Item from './Item.vue'

export default {
  name: 'List',
  components: { Item },
  props: ['todoList'],
}
</script>

<style scoped>
.list {
  margin-top: 10px;
}

.item:nth-of-type(n + 2) {
  margin-top: -1px;
}
</style>
